<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
    <symbol id="bi-eyedropper" viewBox="0 0 16 16">
        <path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2z"/>
    </symbol>
    <symbol id="bi-trash3-fill" viewBox="0 0 16 16">
        <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/>
    </symbol>
</svg>
{{ range .Site.Menus.color }}
<button class="btn btn-link nav-link d-flex align-items-center" type="button" title="{{ .Params.toggle_text }}" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-display="static">
    <svg class="bi my-1" width="16" height="16"><title>{{ .Params.toggle_text }}</title><use href="#bi-eyedropper"></use></svg>
    <span class="d-lg-none ms-2" id="colorSwitcher-text">{{- .Name | safeHTML -}}</span>
</button>
{{ end }}
<div class="dropdown-menu dropdown-menu-start dropdown-menu-md-end" style="--bs-dropdown-min-width:14rem;--bs-dropdown-padding-x:0;">
    <ul class="list-group list-group-flush">
        <li class="list-group-item list-group-item-action text-secondary" style="--bs-list-group-item-padding-x:.5rem;">
            <div class="hstack justify-content-between textColorPicker">
                <label class="fontColorPickerLabel">{{- T "color_text" -}}</label>
                <div class="hstack">
                    <input type="color" class="form-control form-control-color textColorPickerInput" title="{{- T "color_choose" -}}">
                    <button type="button" class="btn btn-sm remove_color">
                        <svg class="bi" width="16" height="16"><title>{{- T "clear" -}}</title><use href="#bi-trash3-fill"></use></svg>
                    </button>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action text-secondary" style="--bs-list-group-item-padding-x:.5rem;">
            <div class="hstack justify-content-between linkColorPicker">
                <label class="linkColorPickerLabel">{{- T "color_link" -}}</label>
                <div class="hstack">
                    <input type="color" class="form-control form-control-color linkColorPickerInput" title="{{- T "color_choose" -}}">
                    <button type="button" class="btn btn-sm remove_color">
                        <svg class="bi" width="16" height="16"><title>{{- T "clear" -}}</title><use href="#bi-trash3-fill"></use></svg>
                    </button>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action text-secondary" style="--bs-list-group-item-padding-x:.5rem;">
            <div class="hstack justify-content-between visitedColorPicker">
                <label class="visitedColorPickerLabel">{{- T "color_visited" -}}</label>
                <div class="hstack">
                    <input type="color" class="form-control form-control-color visitedColorPickerInput" title="{{- T "color_choose" -}}">
                    <button type="button" class="btn btn-sm remove_color">
                        <svg class="bi" width="16" height="16"><title>{{- T "clear" -}}</title><use href="#bi-trash3-fill"></use></svg>
                    </button>
                </div>
            </div>
        </li>
    </ul>
</div>